<script lang="ts" setup>
import type { FormSubmitEvent } from "#ui/types";

defineProps<{
  onSubmit: (event: FormSubmitEvent<RegisterSchema>) => void
}>();
// TODO: 控制提交的类型在 Comp 还是Page?

const registerForm = ref<RegisterSchema>({
  email: "",
  password: "",
  confirmPassword: "",
});
</script>

<template>
  <UCard class="shadow-sm *:mt-2 hover:shadow-xl transition-shadow">
    <UForm
      :schema="registerSchema"
      :state="registerForm"
      class="space-y-4 w-[240px]"
      @submit="onSubmit"
    >
      <UFormGroup label="邮箱" name="email">
        <UInput v-model="registerForm.email" placeholder="邮箱" />
      </UFormGroup>

      <UFormGroup label="密码" name="password">
        <UInput
          v-model="registerForm.password"
          type="password"
          placeholder="密码"
        />
      </UFormGroup>

      <UFormGroup label="确认密码" name="confirmPassword">
        <UInput
          v-model="registerForm.confirmPassword"
          type="password"
          placeholder="确认密码"
        />
      </UFormGroup>

      <UButton type="submit" class="w-full justify-center">
        提交
      </UButton>
    </UForm>
  </UCard>
</template>

<style scoped></style>
